<script setup>
import { addApi,updateApi } from '../../api/user';
import { ref,getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
// 弹出框
const dialogVisible = ref(false)
const show = (val)=>{
  dialogVisible.value = (val)
}
const handleClose = ( )=>{
  dialogVisible.value= false
}

// 定义表单对象
const userForm = ref({
  name:'',
  gender:'',
  phone:''
})

// 修改用户信息
const editSubmit =async()=>{
  let result 
  if(userForm.value.id){
    result =await  updateApi(userForm.value)
  }else{
    result =await addApi(userForm.value)
  }
  dialogVisible.value = false

  // 通知父组件
  instance.emit('search')
}
// 暴露方法
defineExpose({
 dialogVisible,
  show,
  userForm
})
</script>
<template>
<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="1200"
    :before-close="handleClose"
  >
  <!-- 修改表单 -->
   <el-form :model="userForm" label-width="auto" style="max-width: 1200px">
    <el-form-item label="姓名">
      <el-input v-model="userForm.name" />
    </el-form-item>
    <el-form-item label="性别">
        <el-select v-model="userForm.gender" placeholder="性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
      <el-input v-model="userForm.phone" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="editSubmit">保存</el-button>
      <el-button @click="dialogVisible=false">取消</el-button>
    </el-form-item>
   </el-form>
  </el-dialog>

</template>